<template>




    <div>


      <el-main style="padding-left: 0px;padding-top: 0px">
        <div class="table-box">
          <el-table
            :data="objs"
            v-loading="tableLoading"
            border
            stripe
            @selection-change="handleSelectionChange"
            size="mini"
            style="width: 100%">
            <el-table-column
              prop="name"
              label="名称"
            >
            </el-table-column>

            <el-table-column
              prop="start_time"
              :formatter="dateFormat"
              label="开始时间">
            </el-table-column>

            <el-table-column
              prop="duration"
              label="时长(分钟)"
            >
            </el-table-column>


            <el-table-column
              prop="permission"
              :formatter="toPermissionLabel"
              label="状态"
            >

            </el-table-column>



            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button @click="showBroadcastURLView(scope.row)" type="text"
                           size="mini">查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
            background
            :page-size="10"
            :current-page="currentPage"
            @current-change="currentChange"
            layout="prev, pager, next"
            :total="totalCount">
          </el-pagination>
        </div>
      </el-main>



    </div>


</template>
<script>
  import ElRow from "element-ui/packages/row/src/row";

  export default {
    components: {ElRow},
    data() {
      return {
        activeName: 'my_create',
        objs: [],
        dialogTitle: '',
        multipleSelection: [],
        course_options:[],
        teacher_options:[],
        totalCount: -1,
        currentPage: 1,
        dialogVisible: false,
        tableLoading: false,
        permission:'',
        obj: {
          name: '',
          duration:'',
          start_time:'',
          course_id:'',
          broadcast_by:'',
          permission:0
        },
        rules: {
          name: [{required: true, message: '必填:请输入直播活动名称', trigger: 'blur'}],
          duration: [{required: true, message: '必填:请输入直播时长', trigger: 'blur'}],
          start_time: [{required: true, message: '必填:请输入直播开始时间', trigger: 'blur'}],
          course_id: [{required: true, message: '必填:请选择课程', trigger: 'blur'}],
          broadcast_by: [{required: true, message: '必填:请选择直播老师', trigger: 'blur'}]
        }
      };
    },
    mounted: function () {
      this.loadMyParticipateList();
    },
    methods: {

      // handleClick(tab, event) {
      //   //console.log(this.activeName);
      //
      //   if (this.activeName=='my_participate') {
      //       this.loadMyParticipateList();
      //   } else {
      //     this.loadObjs();
      //     this.loadTeacherList();
      //     this.loadCourses();
      //   }
      //
      //
      // },

      //时间格式化
      dateFormat:function(row, column) {
        var date = row[column.property];
        if (date == undefined) {
          return "";
        }
        return moment(date).format("YYYY-MM-DD HH:mm:ss");
      },

      toPermissionLabel:function (row) {
        if (row.permission==0) {
          return "待审核";
        } else if (row.permission==1) {
          return "通过";
        } else if (row.permission==-1) {
          return "未通过";
        }
      },


      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      deleteMany(){
        this.$confirm('此操作将删除[' + this.multipleSelection.length + ']条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var ids = '';
          for (var i = 0; i < this.multipleSelection.length; i++) {
            ids += this.multipleSelection[i].id + ",";
          }
          this.doDelete(ids);
        }).catch(() => {
        });
      },
      deleteObj(row){
        this.$confirm('此操作将永久删除[' + row.name + '], 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.doDelete(row.id);
        }).catch(() => {
        });
      },
      doDelete(ids){
        this.tableLoading = true;
        var _this = this;
        this.deleteRequest("/activity/delete/" + ids).then(resp=> {
          _this.tableLoading = false;
          if (resp && resp.status == 200) {
            var data = resp.data;
            _this.$message({type: data.status, message: data.msg});
            _this.loadObjs();
          }
        })
      },


      currentChange(currentChange){
        this.currentPage = currentChange;
        this.loadMyParticipateList();
      },

      loadMyParticipateList(){
        var _this = this;
        this.tableLoading = true;
        this.getRequest("/activity/my_participate_list?page=" + this.currentPage + "&size=10").then(resp=> {
          this.tableLoading = false;
          if (resp && resp.status == 200) {
            var data = resp.data;
            _this.objs = data.data.arrays;
            _this.totalCount = data.data.count;
          }
        })
      },





      cancelEidt(){
        this.dialogVisible = false;
        this.emptyObjData();
      },
      showEditView(row){
        //console.log(row)
        this.dialogTitle = "编辑直播活动";
        this.obj.name = row.name;
        this.obj.duration = row.duration;
        this.obj.course_id = row.course_id;
        this.obj.start_time = moment(row.start_time).utcOffset(480).format("YYYY-MM-DD HH:mm:ss");
        this.obj.broadcast_by = row.broadcast_by;
        this.obj.permission = row.permission;
        this.obj.id = row.id;
        this.dialogVisible = true;
      },


      showBroadcastURLView(row) {
        var _this = this;

        this.postRequest("/activity/url/get", {id:row.id}).then(resp=> {
          _this.tableLoading = false;
          if (resp && resp.status == 200) {
            var data = resp.data;
            this.$alert(data.data.url, '直播URL', {
              confirmButtonText: '确定'
            });
          }
        })



      },


      showAddView(){
        this.dialogTitle = "添加直播活动";
        this.dialogVisible = true;
        var _this = this;
      },
      emptyObjData(){
        this.obj = {
          name: '',
          duration:'',
          permission:0,
          course_id:'',
          start_time:'',
          broadcast_by:''

        }
      }
    }
  };
</script>
